<!--  -->
<template>
	<div class="lsh-filter-box">
		<Card class="lsh-card-box">
			<template #header>
				<div class="lsh-card-header lsh-tabs-box">
					<Tabs ref="tabsRef" :list="tabsList" v-model="activeInfo.tabsKey" />
					<span class="lsh-tip">{{ showInfo.topTip }}</span>
				</div>
			</template>
			<div class="lsh-list-box" v-show="activeInfo.tabsKey === 'user'">
				<div
					:class="{
						'lsh-list-item': true,
						active: item.id === activeInfo.userId
					}"
					v-for="item in list.user"
					:key="item.id"
					@click="activeInfo.userId = item.id"
					:id="getDomId({ pos: 'top', tabsKey: 'user', id: item.id })"
				>
					<div class="lsh-item-left">
						<a-avatar :size="28">
							<img alt="avatar" :src="item.imgUrl" />
						</a-avatar>
						{{ item.name }}
					</div>
					<span :style="{ color: item.processInfo.color }">{{
						item.processInfo.text
					}}</span>
				</div>
			</div>
			<div class="lsh-list-box" v-show="activeInfo.tabsKey === 'question'">
				<div
					:class="{
						'lsh-list-item': true,
						active: item.id === activeInfo.questionId
					}"
					v-for="item in list.question"
					:key="item.id"
					@click="activeInfo.questionId = item.id"
					:id="getDomId({ pos: 'top', tabsKey: 'question', id: item.id })"
				>
					<div class="lsh-item-left">
						{{ item.numStr }}
						{{ item.name }}
					</div>
					<span :style="{ color: item.processInfo.color }">{{
						item.processInfo.text
					}}</span>
				</div>
			</div>
		</Card>
		<Card class="lsh-card-box">
			<template #header>
				<div class="lsh-card-header">
					<span>{{ showInfo.title }}</span>
					<span class="lsh-tip">{{ showInfo.bottomTip }}</span>
				</div>
			</template>
			<div class="lsh-list-box" v-show="activeInfo.tabsKey === 'user'">
				<div
					:class="{
						'lsh-list-item': true,
						active: item.id === activeInfo.questionId
					}"
					v-for="item in topicList"
					:key="item.id"
					@click="activeInfo.questionId = item.id"
					:id="getDomId({ pos: 'bottom', tabsKey: 'question', id: item.id })"
				>
					<div class="lsh-item-left" style="gap: 4px">
						<span>{{ item.numStr }} {{ item.name }}</span>
						<a-tag :class="TagTypeEnum.error" v-if="item.cannot">不会</a-tag>
					</div>
					<span :style="{ color: item.scoreInfo.color }">{{
						item.scoreInfo.text
					}}</span>
				</div>
			</div>
			<div class="lsh-list-box" v-show="activeInfo.tabsKey === 'question'">
				<div
					:class="{
						'lsh-list-item': true,
						active: item.id === activeInfo.userId
					}"
					v-for="item in userList"
					:key="item.id"
					@click="activeInfo.userId = item.id"
					:id="getDomId({ pos: 'bottom', tabsKey: 'user', id: item.id })"
				>
					<div class="lsh-item-left" style="gap: 4px">
						<a-avatar :size="28">
							<img alt="avatar" :src="item.imgUrl" />
						</a-avatar>
						{{ item.name }}
						<a-tag :class="TagTypeEnum.error" v-if="item.cannot">不会</a-tag>
					</div>
					<span :style="{ color: item.scoreInfo.color }">{{
						item.scoreInfo.text
					}}</span>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Card from '../card/index.vue'
import Tabs from '@/components/tabs/component/sub-tabs.vue'
import { sleep } from '@/utils/fn.ts'
import { tabsList } from './config'
import { TagTypeEnum } from '@/constants'
import { useMarkStore } from '@/store/modules/mark'
import { storeToRefs } from 'pinia'
const props = withDefaults(defineProps<{}>(), {})
const { activeInfo, list } = storeToRefs(useMarkStore())
const tabsRef = ref()
const topicList = computed(() => {
	return (
		list.value.user.find((i) => i.id === activeInfo.value.userId)?.childList ||
		[]
	)
})
const userList = computed(() => {
	return (
		list.value.question.find((i) => i.id === activeInfo.value.questionId)
			?.childList || []
	)
})
const showInfo = computed(() => {
	if (activeInfo.value.tabsKey === 'user')
		return {
			title: '批阅题目',
			topTip: '仅显示已提交学生',
			bottomTip: '仅显示人工批阅题目'
		}
	return {
		title: '批阅学生',
		topTip: '仅显示人工批阅题目',
		bottomTip: '仅显示已提交学生'
	}
})
const getDomId = (params: {
	pos: 'top' | 'bottom'
	tabsKey: 'user' | 'question'
	id: string
}) => {
	return `${params.pos}-${params.tabsKey}-${params.id}`
}
onMounted(async () => {
	await sleep(200)
	tabsRef.value?.findPosition?.()
})

const posList = async () => {
	const doc = window?.rawDocument ?? document
	const topId =
		activeInfo.value.tabsKey === 'user'
			? activeInfo.value.userId
			: activeInfo.value.questionId
	const bottomId =
		activeInfo.value.tabsKey === 'user'
			? activeInfo.value.questionId
			: activeInfo.value.userId
	doc
		.getElementById(
			getDomId({
				pos: 'top',
				tabsKey: activeInfo.value.tabsKey,
				id: topId
			})
		)
		?.scrollIntoView({
			block: 'nearest'
		})
	doc
		.getElementById(
			getDomId({
				pos: 'bottom',
				tabsKey: activeInfo.value.tabsKey === 'user' ? 'question' : 'user',
				id: bottomId
			})
		)
		?.scrollIntoView({
			block: 'nearest'
		})
}
watch(
	[
		() => activeInfo.value.tabsKey,
		() => activeInfo.value.questionId,
		() => activeInfo.value.userId
	],
	() => {
		posList()
	},
	{
		immediate: true
	}
)
</script>
<style scoped lang="less">
.lsh-filter-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	overflow: hidden;
	.lsh-card-box {
		flex: 1;
		flex-shrink: 0;
		overflow: hidden;
		:deep(.lsh-bottom-content) {
			padding: 0;
		}
	}
	.lsh-card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		&.lsh-tabs-box {
			padding: 0 16px 0 0;
		}
		.lsh-tip {
			color: #c9ced6;
			font-family: 'PingFang SC';
			font-size: 12px;
			font-weight: 400;
			line-height: normal;
		}
	}
	.lsh-list-box {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: auto;
		.lsh-list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 45px;
			padding: 8px 16px;
			color: #474f59;
			font-family: 'PingFang SC';
			font-size: 15px;
			font-weight: 400;
			line-height: normal;
			cursor: pointer;
			border-bottom: 1px solid #f2f5fa;
			&:hover {
				background: rgba(237, 241, 247, 1);
			}
			&.active {
				background: rgba(0, 101, 255, 0.08);
				color: #0065ff;
			}
			.lsh-item-left {
				display: flex;
				align-items: center;
				gap: 8px;
			}
		}
	}
}
</style>
